<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="../css/css.css" />
		<link rel="stylesheet" type="text/css" href="../css/style.css" />
		<link rel="stylesheet" type="text/css" href="../css/menu.css" />
		<title>点餐菜单</title>
		<script type="text/javascript"
			src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
		<script src="../layer/layer.js" type="text/javascript"></script>
      <script type="text/javascript" src="../js/jquery.fly.min.js" ></script>
    <!-- 兼容IE10 -->
    <script type="text/javascript" src="../js/requestAnimationFrame.js" ></script>
		<script src="../js/main.js" type="text/javascript"></script>
		<script type="text/javascript">
	$(document).ready(function() {
		$(".m-main li").click(function() {
			$(".m-main li").removeClass("on");
			$(this).addClass("on");
		});
	});
</script>

	</head>
	<body style="background: #efeee9;">
		<input type="hidden" id="pageName" value="customerCenter" />
		<input type="hidden" id="morePrivilege" value="false" />
		<form id="j-main-form" action="">

				<div class="m-top">
			<div class="box" id="j-top-nav">
				<a href="main.html"><div class="logo fl"></div> </a>
				<a href="menu.html"><div class="menu fl"  style="width:100px">
						菜单
					</div> </a>
				<div class="separator fl"></div>
				<a href="member.html"><div class="menu fl" style="width:100px">
						会员中心
					</div> </a>
				<input type="hidden" id="j-is-login" value="false" />
                <div class="clien fl"><span>沈先生<img src="../images/common/arrow-down.png" align="center" /></span></div>
				<div class="start fr" id="j-start-order"
					onclick="show('',550,550,'login.html')">
					立即点餐
				</div>
				<input type="hidden" id="isMemberLogin" value="" />
				<input type="hidden" id="isNewLogin" value="" />
				<input type="hidden" id="j-is-index" value="true" />
				<input type="hidden" id="j-has-order" value="false" />
				<input type="hidden" id="j-order-type" name="orderType" value="null" />
				<input type="hidden" id="j-defaultClassHtmlName" value="Special.htm" />
				<input type="hidden" id="j-username-afterlogin" value="" />

			</div>
		</div>
			<div class="m-main">
				<div class="m-menu fl">
					<ul>
						<!-- 菜单 -->
						<li class="on" onclick="change(this)">
							<a href="#" > 当季特选</a>
						</li>
						<li id="extId2" cn="比萨" en="" onclick="change(this)">
							<a href="#"> 比萨</a>
						</li>
						<li id="extId3" cn="意面" en="" onclick="change(this)">
							<a href="#"> 意面</a>
						</li>
						<li id="extId4" cn="小吃" en="" onclick="change(this)">
							<a href="#"> 小吃</a>
						</li>
						<li id="extId5" cn="汤" en="" onclick="change(this)">
							<a href="#"> 汤</a>
						</li>
						<li id="extId6" cn="饮料" en="" onclick="change(this)">
							<a href="#"> 饮料</a>
						</li>
						<!-- /菜单 -->
					</ul>
				</div>
				<div class="m-menu-content fr" style="position: relative; top: 70px">
					<!-- 产品列表 -->
					<div style="height: 450px; display: none;"></div>
					<div class="m-product-list">
						<div class="product" condid="0" style="background: #FFF">
							<div class="img cursor">
								<img src="../images/banner/Banner_18_2017_08_28_14_25_23.jpg" />
							</div>
							<div class="title">
								荟萃中华九合一比萨
							</div>
							<div class="desc grey">
							</div>
							<div class="order j-menu-order">
								<div class="start ui-bgbtn-green">
									+
								</div>
							</div>
						</div>
						<div class="product" style="background: #FFF">
							<div class="img cursor">
								<img src="../images/banner/Banner_18_2017_12_27_15_10_01.jpg" />
							</div>
							<div class="title">
								新年缤纷小食拼盘
							</div>
							<div class="desc grey"></div>
							<div class="order j-menu-order">
								<div class="start ui-bgbtn-green">
									+
								</div>
							</div>
						</div>
						<div class="product" style="background: #FFF">
							<div class="img cursor">
								<img src="../images/banner/Banner_18_2017_12_27_17_34_47.jpg" />
							</div>
							<div class="title">
								浓情十翅
							</div>
							<div class="desc grey">
							</div>
							<div class="order j-menu-order">
								<div class="start ui-bgbtn-green">
									+
								</div>
							</div>
						</div>
						<div class="product hidden" style="background: #FFF">
							<div class="img cursor">
								<img src="../images/banner/Banner_18_2017_08_28_14_24_36.jpg" />
							</div>
							<div class="title">
								荟萃中华九合一比萨
							</div>
							<div class="desc  grey">
							</div>
							<div class="order j-menu-order">
								<div class="start ui-bgbtn-green">
									+
								</div>
							</div>
						</div>
						<div class="product hidden" style="background: #FFF">
							<div class="img cursor">
								<img src="../images/banner/Banner_18_2017_12_27_17_34_47.jpg" />
							</div>
							<div class="title">
								新年缤纷小食拼盘
							</div>
							<div class="desc  grey"></div>
							<div class="order j-menu-order">
								<div class="start ui-bgbtn-green">
									+
								</div>
							</div>
						</div>

					</div>
                    

 
					<!-- /产品列表 -->
				</div>
			</div>
			</div>
			</div>

			<div class="m-foot">
				<div class="content">
					<div class="content-logo">

						<a href="#"><div class="logo"></div> </a>

						<div class="phone strong-color">
							4008-123-123
						</div>
					</div>
					<div class="content-legal">
						必胜客宅急送不同城市或不同餐厅的送餐菜单和价格有所不同。
						不同时段产品品项及价格有所不同。工作日特惠午餐及下午茶产品只在部分时段供应。详情以输入送餐地址后显示的实际供应的菜单为准。
					</div>

					<div class="contont-one">
						<div class="link">
							<ul>
								<li class="menu">
									<a href="#">当季特选</a>
								</li>
								<li>
									<a href="#">优惠套餐</a>
								</li>
								<li>
									|
								</li>
								<li>
									<a href="#">比萨</a>
								</li>
								<li>
									|
								</li>
								<li>
									<a href="#">意面</a>
								</li>
								<li>
									|
								</li>
								<li>
									<a href="#">饭食</a>
								</li>
								<li>
									|
								</li>
								<li>
									<a href="#">米线</a>
								</li>
								<li>
									|
								</li>
								<li>
									<a href="#">小吃</a>
								</li>
								<li>
									|
								</li>
								<li>
									<a href="#">饮料</a>
								</li>
								<li>
									|
								</li>
								<li>
									<a href="#">汤</a>
								</li>
								<li>
									|
								</li>
								<li>
									<a href="#">沙拉和鲜蔬</a>
								</li>
								<li>
									|
								</li>
								<li>
									<a href="#">甜点</a>
								</li>
								<li class="margin-right">
									<a href="#" target="_blank">帮助中心</a>
								</li>
								<li class="margin-right">
									<a href="#">会员中心</a>
								</li>
							</ul>
						</div>
					</div>



					<div class="content-two clear">

						<div class="middle clear">
							<div class="fl yum-name">
								版权所有&nbsp;百胜咨询（上海）有限公司
							</div>
							<div class="fl">
								<ul>
									<li>
										<a href="#" target="_blank">法律条款</a>
									</li>
									<li>
										|
									</li>
									<li>
										<a href="#" target="_blank">经营公示</a>
									</li>
									<li>
										|
									</li>
									<li>
										<a href="#" target="_blank">隐私条款</a>
									</li>
									<li>
										|
									</li>
									<li>
										<a href="#" target="_blank">联系我们</a>
									</li>
									<li>
										|
									</li>
									<li>
										<a href="#" target="_blank">加入我们</a>
									</li>
								</ul>
							</div>
							<div class="other fr">
								<a href="http://www.miitbeian.gov.cn" target="_blank">沪ICP备&nbsp;17029211-1号</a>
							</div>
						</div>
					</div>
				</div>
			</div>




		</form>
<!-- 购物车-->
  	<div class="m-shopping" id="cart">
            <div class="m-cart">
            	<div id="close">
                	<img src="../images/common/close.png" class="m-img" />
                </div>
                <span> 我的购物盒</span>
                <a href="#">清空购物盒</a>
            </div>
            <div class="border-bot eat">
                <div class=" eat-left fl">
                    <img src="../images/banner/Banner_18_2017_08_28_14_25_56.jpg" />
                    <span>小鸡炖蘑菇饭</span>
                    <br />
                    <span class="login-redcolor">26.0元</span>
                </div>
                <div class="fr  eat-right">
                    <button class="cursor">
                        <img src="../images/common/minus-red.png" />
                    </button>
                    <input type="text" placeholder="1" />
                    <button class="cursor">
                        <img src="../images/common/plus-green.png" />
                    </button>
                </div>
            </div>
            <div class="border-bot eat">
                <div class=" eat-left fl">
                    <img src="../images/banner/Banner_18_2017_08_28_14_25_56.jpg" />
                    <span>小鸡炖蘑菇饭</span>
                    <br />
                    <span class="login-redcolor">26.0元</span>
                </div>
                <div class="fr  eat-right">
                    <button class="cursor">
                        <img src="../images/common/minus-red.png" />
                    </button>
                    <input type="text" placeholder="1" />
                    <button class="cursor">
                        <img src="../images/common/plus-green.png" />
                    </button>
                </div>
            </div>
			<div class="login-bgrcolor eat-bot" id="cart_show">
            	
				<img src="../images/menu/box.png" class="e-img"/>
				<span class="e-top login-redcolor">2</span><strong class="e-title1">总计<span
					class="e-bigfont" id="cart_image" >70元</span><span>（含9元外送费）</span>
				</strong>
                
               
           
				<button class="e-btn fr cu" onclick="location.href='order_submit.html'" >
					选好了 &gt;
				</button>
               
			</div>
		</div>      
	</body>
</html>
    <script>
$(document).ready(function () {
		$(".order").click(function(){
            var cartLeft = $('#cart_image').offset().left - $(document).scrollTop(); // 获取a标签距离屏幕顶端的距离(因为fly插件的start开始位置是根据屏幕可视区域x，y来计算的，而不是根据整个文档的x，y来计算的)
            var cartTop = $('#cart_image').offset().top; // 获取a标签的y坐标
			

　　　　　　  var btnLeft = $(this).parent().find('img').offset().left - $(document).scrollTop()+20; 
　　　　　　  var btnTop = $(this).parent().find('img').offset().top+20;
		
			var img = $(this).parent().find('img').attr('src'); 
			var flyer = $('<img class="u-flyer" src="'+img+'">'); 
			flyer.fly({ 
				start: { 
					left: btnLeft, 
					top: btnTop 
				}, 
				end: { 
					left: cartLeft, //结束位置（必填） 
					top: cartTop, //结束位置（必填） 
					width: 0, //结束时宽度 
					height: 0 //结束时高度 
				}, 
				onEnd: function(){ //结束回调 
					console.log('加入成功！');
					this.destory(); //移除dom 
				} 
			}); 
  
		})
 })
    </script>